<template>
  <div id="app">
    <!-- 导航栏组件 -->
    <NavBar 
      :is-logged-in="isLoggedIn"
      @login="login"
      @go-to-console="goToConsole"
      @toggle-theme="toggleTheme"
      :theme-icon="themeIcon"
    />
  
    <!-- 平台介绍区域 -->
    <PlatformIntro />
  
    <!-- AI模型展示区域 -->
    <AIModels />
  
    <!-- 智能体模板区域 -->
    <AgentTemplates />
  
    <!-- 案例研究区域 -->
    <CaseStudies />
  
    <!-- 页脚组件 -->
    <Footer />
  </div>
</template>

<script>
import NavBar from '@/layout/UserView/NavBar.vue'
import Footer from '@/layout/UserView/Footer.vue'
import PlatformIntro from '@/components/UserView/home/HomeBanner.vue'
import AIModels from '@/components/UserView/home/AIModels.vue'
import AgentTemplates from '@/components/UserView/home/AgentTemplates.vue'
import CaseStudies from '@/components/UserView/home/CaseStudies.vue'

export default {
  name: 'AIPlatform',
  components: {
    NavBar,
    Footer,
    PlatformIntro,
    AIModels,
    AgentTemplates,
    CaseStudies
  },
  data() {
    return {
      isLoggedIn: false,
      isDarkTheme: false,
      themeIcon: 'fas fa-moon'
    };
  },
  methods: {
    login() {
      // 模拟登录
      this.isLoggedIn = true;
    },
    goToConsole() {
      // 导航到控制台
      alert('跳转到控制台');
    },
    toggleTheme() {
      this.isDarkTheme = !this.isDarkTheme;
      this.themeIcon = this.isDarkTheme ? 'fas fa-sun' : 'fas fa-moon';
      
      // 可以在这里添加主题切换的逻辑
      if (this.isDarkTheme) {
        document.documentElement.setAttribute('data-theme', 'dark');
      } else {
        document.documentElement.setAttribute('data-theme', 'light');
      }
    },
    // 处理锚点滚动
    handleAnchorScroll() {
      // 获取URL中的锚点
      const hash = window.location.hash.substring(1);
      
      // 检查是否是我们需要处理的锚点
      if (hash === 'ai-models-section' || hash === 'ai-agent-templates-section' || hash === 'case-studies-section') {
        // 延迟滚动，确保组件已加载
        setTimeout(() => {
          const element = document.getElementById(hash);
          if (element) {
            // 计算导航栏高度（80px）作为偏移量
            const navbarHeight = 80;
            const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
            const offsetPosition = elementPosition - navbarHeight;
            
            // 平滑滚动到指定位置
            window.scrollTo({
              top: offsetPosition,
              behavior: 'smooth'
            });
          }
        }, 300);
      }
    }
  },
  mounted() {
    // 页面加载时检查锚点
    this.handleAnchorScroll();
    // 监听hashchange事件
    window.addEventListener('hashchange', this.handleAnchorScroll);
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('hashchange', this.handleAnchorScroll);
  }
}
</script>

<style>
/* 全局样式保持不变 */
:root {
    --primary: #2563eb;
    --primary-light: #3b82f6;
    --primary-dark: #1d4ed8;
    --secondary: #7c3aed;
    --accent: #f59e0b;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --bg-light: #f8fafc;
    --bg-card: #ffffff;
    --bg-section: #f1f5f9;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 暗色主题变量 */
:root[data-theme="dark"] {
    --bg-light: #0f172a;
    --bg-card: #1e293b;
    --bg-section: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-light: #334155;
    --border-medium: #475569;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    background-color: var(--bg-light);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    transition: var(--transition);
}

#app {
    background-color: var(--bg-light);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    transition: var(--transition);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 内容区域样式 */
.section {
    padding: 50px 0;
    transition: var(--transition);
}

.section.light {
    background-color: var(--bg-section);
}

.section-title {
    text-align: center;
    margin-bottom: 70px;
}

.section-title h2 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.section-title p {
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .section {
        padding: 80px 0;
    }
    .section-title h2 {
        font-size: 2.2rem;
    }
}

/* 辅助类 */
.text-gradient {
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mt-1 {
    margin-top: 8px;
}

.mt-2 {
    margin-top: 16px;
}

.mt-3 {
    margin-top: 24px;
}

.mt-4 {
    margin-top: 32px;
}

.mb-1 {
    margin-bottom: 8px;
}

.mb-2 {
    margin-bottom: 16px;
}

.mb-3 {
    margin-bottom: 24px;
}

.mb-4 {
    margin-bottom: 32px;
}
</style>